<template>
	<!-- 用户中心 -->
	<div class="user-center">
		<!-- 已登录状态 -->
		<div v-if="isLoggedIn" class="user-panel">
			<!-- 用户信息卡片 -->
			<van-card class="user-info-card" :class="{ 'has-avatar': userAvatar }">
				<template #title>
					<div class="avatar-wrapper">
						<van-image :src="userAvatar" width="80px" height="80px" round />
					</div>
					<div class="user-details">
						<div class="user-name">{{ userInfo?.name || '未设置昵称' }}</div>
						<div class="user-actions">
							<van-button size="mini" type="primary" @click="goToProfilePage">个人主页</van-button>
						</div>
					</div>
				</template>
			</van-card>

			<!-- 功能导航区 -->
			<van-grid :column-num="4" border class="quick-actions">
				<van-grid-item icon="star-o" text="收藏" @click="navigateTo('myFavorites')" />
				<van-grid-item icon="todo-list-o" text="浏览记录" @click="navigateTo('history')" />
				<van-grid-item icon="coupon-o" text="红包卡卷" @click="" />
				<van-grid-item icon="gold-coin-o" text="美团币" @click="" />
			</van-grid>
			<van-grid :column-num="4" border class="quick-actions">
				<van-grid-item icon="orders-o" text="全部订单" @click="navigateTo('orderList')" />
				<van-grid-item icon="clock-o" text="待收货/使用" @click="" />
				<van-grid-item icon="comment-o" text="待评价" @click="navigateTo('review')" />
				<van-grid-item icon="after-sale" text="退款售后" @click="" />
			</van-grid>

			<!-- 服务功能列表 -->
			<div class="function-list">
				<van-cell-group>
					<van-cell v-for="item in serviceItems" :key="item.name" :icon="item.icon" :title="item.title"
						is-link @click="navigateTo(item.name)" />
				</van-cell-group>
			</div>

			<!-- 退出登录 -->
			<van-cell-group class="logout-group">
				<van-cell icon="user-o" title="退出登录" is-link @click="logout" />
			</van-cell-group>
		</div>

		<!-- 未登录状态 -->
		<div v-else class="login-panel">
			<van-card class="login-card">
				<template #title>
					<div class="login-avatar">
						<van-image :src="defaultAvatar" width="80px" height="80px" round />
					</div>
					<div class="login-text">
						<div class="login-desc">登录后享受更多服务</div>
					</div>
				</template>
				<template #footer>
					<van-button type="primary" @click="goToLogin">登录/注册</van-button>
				</template>
			</van-card>

			<!-- 未登录快捷入口 -->
			<van-grid :column-num="4" border class="quick-actions">
				<van-grid-item icon="star-o" text="收藏" @click="goToLogin" />
				<van-grid-item icon="todo-list-o" text="浏览记录" @click="goToLogin" />
				<van-grid-item icon="coupon-o" text="红包卡卷" @click="goToLogin" />
				<van-grid-item icon="gold-coin-o" text="美团币" @click="goToLogin" />
			</van-grid>
			<van-grid :column-num="4" border class="quick-actions">
				<van-grid-item icon="orders-o" text="全部订单" @click="goToLogin" />
				<van-grid-item icon="clock-o" text="待收货/使用" @click="goToLogin" />
				<van-grid-item icon="comment-o" text="待评价" @click="goToLogin" />
				<van-grid-item icon="after-sale" text="退款售后" @click="goToLogin" />
			</van-grid>

			<!-- 通用服务 -->
			<div class="function-list">
				<van-cell-group>
					<van-cell v-for="item in commonServiceItems" :key="item.name" :icon="item.icon" :title="item.title"
						is-link @click="navigateTo(item.name)" />
				</van-cell-group>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		useRouter
	} from 'vue-router';
	import {
		showToast,
		showDialog
	} from 'vant';
	import defaultAvatar from '@/assets/images/avatar_default.png';
	import {
		getTokenLocal,
		getUserLocal,
		removeTokenLocal,
		removeUserLocal // 新增：引入删除用户信息方法
	} from '@/utils/auth.js';
	import {
		getDetailByIdAPI
	} from '@/api/user.js';

	// 初始化路由
	const router = useRouter();

	// 状态管理（适配getUserLocal返回null的情况）
	const userInfo = ref(getUserLocal() || {}); // 若为null则初始化为空对象
	const userAvatar = ref(defaultAvatar);
	const isLoading = ref(false);

	// 计算属性：判断用户是否已登录（基于Token存在性）
	const isLoggedIn = computed(() => {
		const token = getTokenLocal();
		return !!token; // 确保Token存在且非空
	});
	
	if(isLoggedIn){
		let avatar = userInfo.avatar || defaultAvatar;
		userAvatar.value = avatar.startsWith('http') ? avatar : `http://localhost:5050/${avatar}`;
	}

	// 跳转到个人主页
	const goToProfilePage = () => {
		router.push({
			name: 'profilePage'
		});
	};

	// 功能列表数据
	const serviceItems = [{
			title: '我的客服',
			name: '',
			icon: 'orders-o'
		},
		{
			title: '优惠券',
			name: '',
			icon: 'paid'
		},
		{
			title: '帮助中心',
			name: 'helpCenter',
			icon: 'question-o'
		},
		{
			title: '设置',
			name: 'Setting',
			icon: 'setting-o'
		},
	];

	// 未登录时的通用服务
	const commonServiceItems = [{
			title: '帮助中心',
			name: 'helpCenter',
			icon: 'question-o'
		},
		{
			title: '关于我们',
			name: 'aboutUs',
			icon: 'info-o'
		},
	];

	
	// 生命周期钩子（初始化时获取用户信息）
	onMounted(() => {
		if (isLoggedIn.value) {
			
		}
	});

	// 导航方法（增加登录校验）
	const navigateTo = (name) => {
		if (!name) return; // 空路由不跳转

		if (!isLoggedIn.value) {
			showToast('请先登录');
			router.push({
				name: 'login'
			});
			return;
		}

		router.push({
			name
		});
	};

	// 登录相关方法
	const goToLogin = () => {
		router.push({
			name: 'login'
		});
	};

	const goToProfile = () => {
		if (isLoggedIn.value) {
			router.push({
				name: 'profile'
			});
		} else {
			goToLogin();
		}
	};

	// 退出登录（完善清理逻辑）
	const logout = () => {
		showDialog({
			title: '确认退出',
			message: '确定要退出登录吗？',
			confirmButtonText: '确认',
			cancelButtonText: '取消'
		}).then(() => {
			// 清除Token和用户信息
			removeTokenLocal();
			removeUserLocal(); // 新增：清除本地用户信息
			userInfo.value = {};
			userAvatar.value = defaultAvatar;
			showToast('退出成功');
			router.push({
				name: 'home'
			});
		});
	};
</script>

<style lang="less" scoped>
	.user-center {
		padding: 15px;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.user-panel,
	.login-panel {
		.van-card {
			margin-bottom: 15px;
			border-radius: 12px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
			background-color: #fff;

			&:hover {
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
				transform: translateY(-1px);
				transition: all 0.3s ease;
			}
		}

		.avatar-wrapper {
			display: flex;
			justify-content: center;
			margin-bottom: 10px;
		}

		.user-details {
			text-align: center;

			.user-name {
				font-size: 18px;
				font-weight: 500;
				margin-bottom: 5px;
			}

			.user-actions {
				margin-top: 10px;
			}
		}

		.quick-actions {
			margin-bottom: 15px;
			background-color: #fff;
			border-radius: 12px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

			.van-grid-item {
				padding: 15px 0;
			}
		}

		.function-list {
			margin-bottom: 15px;
			background-color: #fff;
			border-radius: 12px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

			.van-cell {
				padding: 16px 15px;

				&:active {
					background-color: #f5f5f5;
				}
			}
		}

		.logout-group {
			background-color: #fff;
			border-radius: 12px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

			.van-cell {
				padding: 16px 15px;

				&:active {
					background-color: #f5f5f5;
				}
			}
		}
	}

	.login-panel {
		.login-card {
			.login-avatar {
				display: flex;
				justify-content: center;
				margin-bottom: 10px;
			}

			.login-text {
				text-align: center;

				.login-title {
					font-size: 18px;
					font-weight: 500;
					margin-bottom: 5px;
				}

				.login-desc {
					font-size: 14px;
					color: #999;
				}
			}

			.van-button {
				width: 100%;
				margin-top: 15px;
			}
		}
	}
</style>